<template>
  <div style="box-sizing: border-box">
    <div
      style="
        height: 5vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <div>
        <img
          src="https://devapi.jbkl.com/storage/logo.jpg"
          style="margin-left: 10px"
          width="3%"
        />
      </div>
    </div>
    <div class="wxlogin-container">
      <el-row>
        <el-col :lg="14" :md="11" :sm="24" :xl="14" :xs="24">
          <div style="color: transparent">占位符</div>
        </el-col>
        <el-col :lg="9" :md="12" :sm="24" :xl="9" :xs="24">
          <div class="wxlogin-form">
            <iframe
              class="wxlogin-box"
              frameborder="0"
              src="https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid=ww0aa09f9c0c03b686&redirect_uri=https%3A%2F%2Fdevapi.jbkl.com%2Fapi%2Fqw_login&state=U2luby1DbG91ZA==&usertype=member"
            />
            <div class="flex_y_center">
              <router-link to="/register">
                <div class="router-to" style="margin-top: 20px">
                  {{ translateTitle('注册') }}
                </div>
              </router-link>
              <router-link to="/login">
                <div class="router-to" style="margin-top: 20px">
                  {{ translateTitle('账户登陆') }}
                </div>
              </router-link>
            </div>
          </div>
        </el-col>
        <el-col :lg="1" :md="1" :sm="24" :xl="1" :xs="24">
          <div style="color: transparent">占位符</div>
        </el-col>
      </el-row>
    </div>
    <div></div>
  </div>
</template>

<script>
  import { translateTitle } from '@/utils/i18n'
  import { mapActions } from 'vuex'

  export default {
    name: 'Wxlogin',
    data() {
      return {}
    },
    methods: {
      ...mapActions({
        setToken: 'user/setToken',
      }),
      translateTitle,
    },
  }
</script>

<style lang="scss" scoped>
  .wxlogin-container {
    height: 85vh;
    background: url('~@/assets/login_images/background.jpg') center center fixed
      no-repeat;
    background-size: cover;

    .wxlogin-form {
      border-radius: 6%;
      position: relative;
      max-width: 100%;
      padding: 3.5vh;
      margin: calc((100vh - 590px) / 2) 5vw 5vw;
      overflow: hidden;
      background: #fff;
      /* background: url(/static/img/login_form.73cf0c11.png); */
      background-size: 100% 100%;

      .title-tips {
        margin-top: 29px;
        font-size: 26px;
        font-weight: 400;
        // color: $base-color-white;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .wxlogin-box {
        width: 100%;
        height: 400px;
      }

      .wxlogin-btn {
        display: inherit;
        width: 220px;
        height: 30px;
        margin-top: 5px;
        border: 0;

        &:hover {
          opacity: 0.9;
        }
      }

      .auth_tel-code {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 120px;
        height: 32px;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        user-select: none;
        border-radius: 3px;
      }
    }
    .router-to {
      width: 100px;
      float: left;
    }
    .tips {
      margin-bottom: 10px;
      font-size: $base-font-size-default;
      color: $base-color-white;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    ::v-deep {
      .el-form-item {
        padding-right: 0;
        margin: 20px 0;
        color: #454545;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 2px;

        i {
          position: absolute;
          top: 8px;
          left: 5px;
          z-index: $base-z-index;
          font-size: 16px;
          color: #d7dee3;
          cursor: pointer;
          user-select: none;
        }

        &__content {
          min-height: $base-input-height;
          line-height: $base-input-height;
        }

        &__error {
          position: absolute;
          top: 100%;
          left: 18px;
          font-size: $base-font-size-small;
          line-height: 18px;
          color: $base-color-red;
        }
      }

      .el-input {
        box-sizing: border-box;

        input {
          height: 48px;
          padding-left: 35px;
          font-size: $base-font-size-default;
          line-height: 58px;
          background: #f6f4fc;
          border: 0;
        }
      }
    }
  }
  .vab-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    padding: 0 $base-padding 0 $base-padding;
    color: rgba(0, 0, 0, 0.45);
    background: $base-color-white;
    border-top: 1px dashed $base-border-color;

    i {
      margin: 0 5px;
    }
  }
</style>
